<template>
	<view class="content">
		<view class="integral">
			<view class="header">
				<p>当前积分</p>
				<p>0</p>
			</view>
			<view class="tj">
				<view class="item">
					<p>1300</p>
					<p>累计积分</p>
				</view>
				<view class="item">
					<p>222</p>
					<p>累计消费</p>
				</view>
				<view class="item">
					<p>300</p>
					<p>冻结积分</p>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="item" :class="{active:current==1 ? true : false}" @click="chooseClick(1)">
				<span>分值明细</span>
			</view>
			<view class="item" :class="{active:current==2 ? true : false}" @click="chooseClick(2)">
				<span>分值提升</span>
			</view>
		</view>
		<view class="cont">
			<view class="list" v-if="current==1">
				<view class="item" v-for="index in 10" :key="index">
					<view class="left">
						<p>签到积分奖励</p>
						<p>2024-04-24</p>
					</view>
					<view class="right">
						<p>+20</p>
					</view>
				</view>
			</view>
			<view class="zjf" v-if="current==2">
				<view class="item">
					<image src="../../static/gift.png" mode=""></image>
					<p>购买商品可获得积分奖励</p>
					<view class="btn">
						<span>赚积分</span>
					</view>
				</view>
				<view class="item">
					<image src="../../static/money.png" mode=""></image>
					<p>每日签到可获得积分奖励</p>
					<view class="btn">
						<span>赚积分</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				current:1
			};
		},

		methods: {
			chooseClick(type){
				this.current=type;
			}
		}
	}
</script>

<style scoped lang="scss">
.cont{
	.zjf{
		.item{
			padding:10px;
			display:flex;
			align-items:center;
			justify-content:space-between;
			background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
			width:90%;
			height:100px;
			margin:10px auto;
			image{
				width:60px;
				height:60px;
			}
			p{
				color: #e1ba6b;
			}
			span{
				color: #e1ba6b;
			}
			.btn{
				width:80px;
				height:30px;
				border: 1px solid #e1ba6b;
				text-align:center;
				line-height:30px;
				border-radius:20px;
			}
		}
	}
	.list{
		.item{
			display:flex;
			align-items:center;
			justify-content:space-between;
			border-bottom:1px solid #f0f0f0;
			padding:15px;
			.right{
				color:#ff0000;
				font-weight:bold;
			}
		}
	}
}
.tabs{
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-bottom:1px solid #f0f0f0;
	.active{
		background-color:#f0f0f0;
		color:#ff0000;
	}
	.item{
		width:50%;
		text-align:center;
		padding:20px;
	}
}
.integral{
	width:100%;
	background-color:#e93325;
	height:220px;
	.tj{
		display:flex;
		align-items:center;
		justify-content: space-between;
		padding:20px;
		text-align:center;
		color:#ffffff;
		p:nth-child(1){
			font-size:25px;
		}
	}
	.header{
		text-align:center;
		color:#ffffff;
		padding-top:20px;
		p:nth-child(2){
			line-height:50px;
			margin:10px auto;
			font-size:25px;
			font-weight:bold;
			width:100px;
			border-bottom:1px solid #ffffff;
		}
	}
}
</style>
